import React, { PureComponent } from 'react';
import { LoginWrapper, LoginBox, Input, Button } from './style';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import { Redirect } from 'react-router-dom';

class Login extends PureComponent {
    render() {
        const { login } = this.props;
        if (!login) {
            return (
                <LoginWrapper>
                    <LoginBox>
                        <Input placeholder="账号" innerRef={(input) => { this.account = input }} />
                        <Input placeholder="密码" type="password" innerRef={(input) => { this.password = input }} />
                        <Button onClick={() => {
                            this.props.handleClick(this.account, this.password)
                        }}>登陆</Button>
                    </LoginBox>
                </LoginWrapper>
            )
        } else {
            return (
                <Redirect to='/' />
            )
        }
    }
}

const mapStateToProps = (state) => {
    return {
        login: state.get('login').get('login')
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        handleClick(accountElem, passwordElem) {
            const action = actionCreators.login(accountElem.value, passwordElem.value);
            dispatch(action);
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);